<template>
	<view class="page-box">
		<view class="input-box" style="margin-top: 80px">
			<text class="area-code-box">+86</text>
			<input class="phone-input-box" maxlength="11" v-model="loginForm.phone" focus placeholder="请输入手机号" />
		</view>
		<view class="input-box" style="margin-top: 24px">
			<input class="auth-input-box" v-model="loginForm.code" placeholder="请输入验证码" />
			<view class="division-line-box">
			</view>
			<view @click.native="timeBtnClick" class="time-btn-box"
				:class="timeNum == 0 ? 'allow-btn-box' : 'un-allow-btn-box'">
				{{timeNum == 0 ? '获取验证码' : timeNum + 's'}}
			</view>
		</view>
		<button class="login-btn-box" @click.native="loginClick" type="default"
			:disabled="loginForm.phone==''||loginForm.code=='' ? true : false">同意协议并登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeNum: 0,
				timer: null,
				loginForm: {
					phone: '',
					code: ''
				}
			}
		},
		onShow() {
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					if (res.data) {
						uni.redirectTo({
							url: '/pages/home/home'
						});
					}
				}
			});
		},
		methods: {
			timeBtnClick() {
				let self = this
				if (self.timeNum == 0) {
					let req = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
					if (req.test(this.loginForm.phone)) {
						self.getCode()
					} else {
						uni.showToast({
							title: '请输入正确手机号',
							icon: 'none'
						})
					}

				}
			},
			getCode() {
				let params = {
					mobile: this.loginForm.phone,
					event: 'notice'
				}
				let self = this
				this.$http.post('api/sms/send', params).then((res) => {
					self.timeNum = 59
					self.timer = setInterval(function() {
						self.timeNum--
						if (self.timeNum == 0) {
							clearInterval(self.timer)
						}
					}, 1000)
					uni.showToast({
						title: res.msg || '验证码已发送，请注意查收短信'
					})
				}).catch((err) => {
					uni.showToast({
						title: err.data.msg || '验证码发送失败',
						icon: 'none'
					})
				})
			},
			loginClick() {

				let params = {
					mobile: this.loginForm.phone,
					captcha: this.loginForm.code
				}
				this.$http.post('api/user/fenmobilelogin', params).then((res) => {
					uni.setStorage({
						key: 'userInfo',
						data: JSON.stringify(res.data.userinfo),
						success: function() {
							uni.redirectTo({
								url: '/pages/home/home'
							});
						}
					});
				}).catch((err) => {
					uni.showToast({
						title: err.data.msg || '登录失败',
						icon: 'none'
					})
				})

			}
		}
	}
</script>

<style scoped>
	.page-box {
		width: 100%;
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.input-box {
		width: 85%;
		height: 48px;
		background: #F5F5F5;
		border-radius: 24px;
		display: flex;
		align-items: center;
	}

	.area-code-box {
		margin: 0px 16px;
		width: 30px;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.phone-input-box {
		width: calc(100% - 56px);
		height: 100%;
	}

	.auth-input-box {
		margin-left: 16px;
		width: calc(100% - 136px);
		height: 100%;
	}

	.division-line-box {
		width: 1px;
		height: 16px;
		background: #B5B5B5;
	}

	.time-btn-box {
		width: 104px;
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: center;
	}

	.allow-btn-box {
		color: #010101;
	}

	.un-allow-btn-box {
		color: #B5B5B5;
	}

	.login-btn-box {
		margin-top: 40px;
		width: 85%;
		height: 46px;
		border-radius: 21px;
		background: #010101;
		font-size: 18px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
